<!doctype html>
<html dropzone>
  <head>
    <title>SVGOMG - SVGO's Missing GUI</title>
    <meta name="theme-color" content="#303F9F">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">
    <link rel="preload" as="script" href="js/page.js">
    <link rel="preload" as="script" href="https://www.google-analytics.com/analytics.js">
    <link rel="preload" as="style" href="css/all.css">
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:400,700|Inconsolata">
    <style>{{headCSS|safe}}</style>
    <script>
      if ((!location.port || location.port == "80") && location.protocol != 'https:') {
        location.protocol = 'https:';
      }

      window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
      ga('create', 'UA-58850134-1', 'auto');
      ga('send', 'pageview');

      window.version = "{{changelog[0].version}}";
    </script>
    <link rel="manifest" href="manifest.json">
    <link rel="apple-touch-icon-precomposed" href="imgs/icon.png">
    <link rel="icon" href="imgs/icon.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="application-name" content="SVGOMG">
  </head>
  <body>
    <div class="app-output">
      <div class="main-menu">
        <div class="overlay"></div>
        <nav class="menu">
          <ul>
            <li>
              <div tabindex="0" role="button" class="load-file unbutton menu-item needsclick">
                <svg viewBox="0 0 24 24" class="icon"><path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>
                <span class="menu-item-text">Open SVG</span>
              </div>
              <input type="file" class="load-file-input" accept=".svg">
            </li>
            <li>
              <label class="menu-input menu-item">
                <svg viewBox="0 0 24 24" class="icon"><path d="M19 2h-4.2C14.4.8 13.3 0 12 0c-1.3 0-2.4.8-2.8 2H5C4 2 3 3 3 4v16c0 1 1 2 2 2h14c1 0 2-1 2-2V4c0-1-1-2-2-2zm-7 0c.6 0 1 .5 1 1s-.5 1-1 1-1-.5-1-1 .5-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/></svg>
                <div class="input-area">
                  <textarea class="paste-input"></textarea>
                  <span class="label-txt">Paste markup</span>
                </div>
              </label>
            </li>
            <li>
              <div tabindex="0" role="button" class="load-demo unbutton menu-item">
                <svg viewBox="0 0 24 24" class="icon"><path d="M18.92 6c-.2-.58-.76-1-1.42-1h-11c-.66 0-1.2.42-1.42 1L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-6zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>
                <span class="menu-item-text">Demo</span>
              </div>
            </li>
            <li>
              <a href="https://github.com/jakearchibald/svgomg" class="menu-item">
                <svg viewBox="0 0 512 512" class="icon"><path d="M7 266.8c22.6-5.7 53.3-13.4 107-14.8-1.4-3-2.8-6-4-9.2-21-.2-85.4 2.8-107.5 8.2H2c-.6 0-1.3-.4-1.5-1.2-.2-1 .4-1.8 1.3-2 21.8-5.4 84.8-8.4 107-8.3-5-14.8-7.2-31.7-7.2-50.6 0-33.6 10.5-46.2 24.5-64-10.6-38.3 4-64.4 4-64.4s22.5-4.7 65 25.8c23.2-9.8 84.7-10.7 113.8-2.2 18-11.8 50.6-28.5 63.8-23.8 3.6 5.7 11.3 22.5 4.7 59.3 4.5 8 27.7 25.3 27.8 74-.2 18-2 33-5.6 45.8 55.6-.4 88.2 4 110.8 8.3.8.2 1.4 1 1.3 2-.2.7-1 1.3-1.6 1.3h-.5c-22.4-4-55.2-8.7-111-8.2-1 3.3-2 6.4-3.3 9.3 19 .7 71.2 2.8 113.8 15.8 1 .3 1.4 1.2 1 2 0 .8-.7 1.2-1.4 1.2h-.5c-43-13.2-96.5-15-114.2-15.6-15.4 34-47 46.6-98.3 51.8 16.6 10.5 21.3 23.6 21.3 59 0 35.5-.5 40.2-.3 48.4 0 13.4 19.7 19.8 19 24-.7 4.4-16.4 3.7-23.7 1-20.8-7-18.7-24.4-18.7-24.4l-.6-47.4s1.4-25.5-8-25.5V420c0 16.8 11.8 22 11.8 28 0 10.8-21.6-1-28.2-7.6-10-10-9-31.7-8.7-48.8.2-16.4-.2-52.5-.2-52.5l-6.8.3s3 78.7-3.6 93c-8.3 18.4-33.5 24.8-33.5 16.4 0-5.7 6.3-4 9.8-16.5 3-10.8 2-91 2-91s-8.2 4.8-8.2 19.8l-.2 57.8c0 14.8-20.8 23-31 23-5 0-11.3 0-11.3-2.8 0-6.8 19.2-10.8 19.2-25l-.3-43.8s-9.7 1.7-23.4 1.7c-34.6 0-45.6-22.2-50.8-34.6-6.8-16-15.6-23.7-25-29.7-5.7-3.7-7-8-.4-9.4 30.7-5.7 38.5 34.8 59 41.3 14.6 4.6 33.4 2.6 42.7-3.5 1.4-12.3 10.3-23 17.7-28.6-52-5-83-23-99-52-54.4 1.2-85.3 9-108 14.6L3 271.2h-.4c-.8 0-1.5-.5-1.6-1.2-.3-1 .3-1.8 1.2-2l4.8-1.2z"/></svg>
                <span class="menu-item-text">Contribute</span>
              </a>
            </li>
            <li>
              <a href="https://github.com/jakearchibald/svgomg/blob/master/README.md" class="menu-item">
                <svg viewBox="0 0 24 24" class="icon"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
                <span class="menu-item-text">About</span>
              </a>
            </li>
          </ul>
          <div class="menu-extra"></div>
          <div class="menu-footer-notes">
            <p>Powered by the incredible <a href="https://github.com/svg/svgo">SVGO</a></p>
          </div>
        </nav>
      </div>
      <div class="toolbar">
        <div class="menu-toolbar-item">
          <button class="unbutton menu-btn">
            <svg viewBox="0 0 24 24">
              <title>Menu</title>
              <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
            </svg>
          </button>
        </div>
        <form class="material-tabs view-toggler">
          <label class="material-tab">
            <input type="radio" name="output" value="image" checked>
            <span class="selected"></span>
            Image
          </label>
          <label class="material-tab">
            <input type="radio" name="output" value="code">
            <span class="selected"></span>
            Markup
          </label>
        </form>
      </div>
      <div class="main">
        <div class="output">
          <div class="action-button-container">
            <div class="minor-action-container"></div>
            <div class="results-container"></div>
          </div>
        </div>
        <div class="settings">
          <div class="results-container-mobile"></div>
          <div class="settings-scroller">
            <section class="global">
              <h1 class="settings-sub-heading">Global settings</h1>
              <div>
                <label class="setting-item-toggle">
                  <input type="checkbox" name="original">
                  {% include "partials/material-switch.html" %}
                  Show original
                </label>
              </div>
              <div>
                <label class="setting-item-toggle">
                  <input type="checkbox" name="gzip" checked>
                  {% include "partials/material-switch.html" %}
                  Compare gzipped
                </label>
              </div>
              <div>
                <label class="setting-item-toggle">
                  <input type="checkbox" name="pretty">
                  {% include "partials/material-switch.html" %}
                  Prettify markup
                </label>
              </div>
              <div>
                <label class="setting-item-range">
                  <div class="label-text">Precision</div>
                  <input type="range" min="0" max="8" step="1" value="3" name="floatPrecision">
                </label>
              </div>
            </section>
            <section class="plugins">
              <h1 class="settings-sub-heading">Features</h1>
              {% for plugin in plugins %}
                <div>
                  <label class="setting-item-toggle">
                    <input type="checkbox"
                           name="{{ plugin.id }}"
                           {% if plugin.active %}checked{% endif %}>
                    {% include "partials/material-switch.html" %}
                    {{ plugin.name }}
                  </label>
                </div>
              {% endfor %}
            </section>
            <div class="setting-reset-row">
              <button class="unbutton setting-reset">Reset all</button>
            </div>
          </div>
        </div>
      </div>
      <div class="preloader">
        <div class="spinner">
          <div class="spinner-container">
            <div class="spinner-layer">
              <div class="circle-clipper left">
                <div class="circle"></div>
              </div>
              <div class="gap-patch">
                <div class="circle"></div>
              </div>
              <div class="circle-clipper right">
                <div class="circle"></div>
              </div>
            </div>
          </div>
        </div>
        <p>Sorry, wasn't ready…</p>
      </div>
      <script>
        document.querySelector('.preloader').addEventListener('click', function(event) {
          // track it
          ga('send', 'event', 'preloader', 'clicked');
          this.className = 'preloader active';
        });

        requestAnimationFrame(function() {
          requestAnimationFrame(function() {
            [
              "css/all.css",
              "https://fonts.googleapis.com/css?family=Roboto:400,700|Inconsolata"
            ].forEach(function(url) {
              var link = document.createElement('link');
              link.rel = "stylesheet";
              link.crossorigin = true;
              link.href = url;

              document.head.appendChild(link);
            });

            [
              'js/page.js',
              'https://www.google-analytics.com/analytics.js'
            ].forEach(function(url) {
              var script = document.createElement('script');
              script.src = url;
              document.head.appendChild(script);
            });
          });
        });
      </script>
    </div>
  </body>
</html>
